<script setup>
  import { ref } from 'vue';
import slUniCalendar from './components/sl-uni-calendar/sl-uni-calendar'
import { getMyTask } from '../../apis/user';
  const all = ref(0)
  const success = ref(0)
  const km = ref(0)
  const getTaskinfo = (date) => {
    getMyTask(date.year,date.month,res => {
      all.value = res.data.taskAmounts
      success.value = res.data.completedAmounts
      km.value = res.data.transportMileage
    })
  }
</script>

<template>
  <view class="page-container">
    <sl-uni-calendar :show-month="false" @change="getTaskinfo">
      <view class="data-overview">
        <view class="item">
          <text class="volumn">{{all}}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{success}}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{km}}</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </sl-uni-calendar>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
